import React from "react";
import { Button, DatePicker, Input, Tooltip } from 'antd';

import { eventThirdStatisticsOverview, eventThirdStatisticsTrend } from '@/request/dataBoard'
import './style/style.less'
import '@/font/iconfont.css'
import moment from 'moment';
import Card from "@/views/dataBoard/components/card.jsx"
import OnlineIncome from '@/views/dataBoard/components/IsOnlineIncomenew.jsx'
import _ from 'lodash'
class Index extends React.Component {
    state = {
        dataSource: [],
        defaultValueTime: null,
        dateType: "day",
        selectVal: "all",
        selected: {},
        beginTime: moment().subtract(1, 'days').format('yyyy-MM-DD'),
        endTime: moment().subtract(1, 'days').format('yyyy-MM-DD'),
        time: '',
        chartData: {
            eventTrendList: [],
            dateList: []
        }
    }
    charts = React.createRef()
    async componentDidMount() {
        await this.getData();
        await this.getChartData();
        this.setState({
            time: moment().subtract(1, 'days').format('yyyy-MM-DD'),
        })
    }

    getData = async () => {
        let res = await eventThirdStatisticsOverview({ "dateType": this.state.dateType, "beginDate": this.state.beginTime, "endDate": this.state.endTime })
        let UnitDispose = (data) => {
            if (!!data) {
                if (data > 1000000) {
                    return data > 1000000 ? (data / 1000000).toFixed(2) + "百万" : data
                } else {
                    return (data > 10000 ? (data / 10000).toFixed(2) + "万" : data || 0)
                }
            } else {
                return 0
            }
        };
        if (res.code === 0) {
            let data = res.data ? res.data : []
            let dataSource = [
                {
                    top:
                    {
                        title: '粘贴淘口令人数',
                        value: UnitDispose(data.pasteKeyCount),
                        explain: "在三方商城复制商品内容并在哈奇马APP粘贴链接查询商品的人数注：同一个账户（不区分设备）在统计时间范围内访问多次只记为一个",
                        yesterday: data.pasteKeyCountTrend,
                    },
                },
                {
                    top:
                    {
                        title: '首页搜索访客数',
                        value: UnitDispose(data.searchCount),
                        explain: "通过app首页搜索淘宝或拼多多商品的用户数",
                        yesterday: data.searchCountTrend
                    }

                },
                {
                    top:
                    {
                        title: '"全网好货"页访客数',
                        value: UnitDispose(data.pageVisitCount),
                        explain: "进入到全网好货专区页的用户数",
                        yesterday: data.pageVisitCountTrend
                    }
                },
                {
                    top:
                    {
                        title: '“全网好货”页平均停留时长（分钟）',
                        value: UnitDispose(data.pageStayDuration ? (data.pageStayDuration / 60).toFixed(2) : 0),
                        explain: "停留总时长/访客人数 停留总时长：统计周期内打开相关页面到退出的浏览时长之和",
                        yesterday: data.pageStayDurationTrend
                    }
                },
                {
                    top:
                    {
                        title: '商品详情页访客数',
                        value: UnitDispose(data.goodsDetailVisitCount),
                        explain: "进入到哈奇马APP全网好货商品详情页的人数",
                        yesterday: data.goodsDetailVisitCountTrend
                    }
                },
                {
                    top:
                    {
                        title: '商品详情页跳出人数',
                        value: UnitDispose(data.goodsDetailOutCount),
                        explain: "从哈奇马APP全网好货商品详情页点击跳出到三方的人数",
                        yesterday: data.goodsDetailOutCountTrend
                    }
                },
                {
                    top:
                    {
                        title: '入口-详情页转化率 （%）',
                        value: UnitDispose(data.detailEnterRate ? (data.detailEnterRate * 100).toFixed(2) : 0) + '%',
                        explain: "（商品详情页访客数 /粘贴淘口令人数+“全网好货”页访客数+首页搜索访客数  去重 ）*100%",
                        yesterday: data.detailEnterRateTrend
                    }
                },
                {
                    top:
                    {
                        title: '详情页-跳往三方转化率（%）',
                        value: UnitDispose(data.detailOutRate ? (data.detailOutRate * 100).toFixed(2) : 0) + '%',
                        explain: "商品详情页跳出人数/商品详情页访客数",
                        yesterday: data.detailOutRateTrend
                    }
                },
            ]

            this.setState({ dataSource })
        }
    }
    getChartData = async () => {
        let res = await eventThirdStatisticsTrend({ "dateType": this.state.dateType, "businessType": this.state.selectVal, "beginDate": this.state.beginTime, "endDate": this.state.endTime })
        if (res.data && res.code === 0) {
            let data = res.data;
            this.setState({
                chartData: {}
            }, () => {
                this.setState({
                    chartData: data
                })
            })
        }
    }

    onChange = (dates, dateStrings, type) => {

        if (dates) {

            let beginTime = "";
            let endTime = ""
            let time = ""
            if (type == "year") {
                beginTime = moment(dates).startOf('year').format('YYYY-MM-DD')
                endTime = moment(dates).endOf('year').format('YYYY-MM-DD')
                time = beginTime + '~' + endTime
            }
            if (type == "month") {
                beginTime = moment(dates).startOf('month').format('YYYY-MM-DD')
                endTime = moment(dates).endOf('month').format('YYYY-MM-DD')
                time = beginTime + '~' + endTime
            }
            if (type == "week") {
                beginTime = moment(dates).startOf('week').format('YYYY-MM-DD')
                endTime = moment(dates).endOf('week').format('YYYY-MM-DD')
                time = beginTime + '~' + endTime
            }
            if (type == "day") {
                beginTime = dateStrings
                endTime = dateStrings
                time = beginTime
            }
            if (type == "maybe") {
                beginTime = dateStrings[0]
                endTime = dateStrings[1]
                time = beginTime + "~" + endTime
            }

            this.setState({
                beginTime: beginTime,
                endTime: endTime,
                dateType: type == "maybe" ? "day" : type,
                time: time
            }, () => {
                this.getData();
                this.getChartData()
            })
        } else {
        }
    };
    open = (a) => {
        this.setState({
            defaultValueTime: null
        })
    }
    setQuery = (params) => {
        this.setState({
            selected: params
        })
    }
    changeName = (name) => {
        let chartName = ""
        switch (name) {
            case "pasteKeyCount":
                chartName = "粘贴淘口令人数";
                return chartName;
            case "searchCount":
                chartName = "首页搜索访客数";
                return chartName;
            case "pageVisitCount":
                chartName = '"全网好货"页访客数';
                return chartName;
            // case "pageStayDuration":
            //     chartName = "全网好货”页停留时长（分钟）";
            //     return chartName;
            case "goodsDetailVisitCount":
                chartName = "商品详情页访客数";
                return chartName;
            case "goodsDetailOutCount":
                chartName = "商品详情页跳出人数";
                return chartName;
            case "detailEnterRate":
                chartName = "入口详情页转化率";
                return chartName;
            case "detailOutRate":
                chartName = "详情页-跳往三方转化率(%)";
                return chartName;
        }
    }
    render() {
        const { dataSource, time, chartData, defaultValueTime } = this.state

        return <div className={"p-layout-box configuration"}>
            <p className="realTitle">概览数据 <span>统计时间：{time}</span></p>
            <div className="realTime">
                <div className="searchBtn">
                    <div className="box" id="area">
                        <Button type="primary">年</Button>
                        <DatePicker getPopupContainer={() => document.getElementById('area')} allowClear={false} onOpenChange={this.open} picker="year" value={defaultValueTime} onChange={(a, b) => this.onChange(a, b, "year")} className="dateBtn"  ></DatePicker>
                    </div>
                    <div className="box" id="area">
                        <Button type="primary">月</Button>
                        <DatePicker getPopupContainer={() => document.getElementById('area')} allowClear={false} onOpenChange={this.open} format={'YYYY-MM'} value={defaultValueTime} picker="month" onChange={(a, b) => this.onChange(a, b, "month")} className="dateBtn"  ></DatePicker>
                    </div>
                    <div className="box" id="area">
                        <Button type="primary" >周</Button>
                        <DatePicker getPopupContainer={() => document.getElementById('area')} allowClear={false} onOpenChange={this.open} value={defaultValueTime} picker="week" onChange={(a, b) => this.onChange(a, b, "week")} className="dateBtn"  ></DatePicker>
                    </div>
                    <div className="box" id="area">
                        <Button type="primary" >日</Button>
                        <DatePicker getPopupContainer={() => document.getElementById('area')} allowClear={false} onOpenChange={this.open} format={'YYYY-MM-DD'} value={defaultValueTime} onChange={(a, b) => this.onChange(a, b, "day")} className="dateBtn"  ></DatePicker>
                    </div>
                </div>
            </div>
            <div style={{ color: '#999', marginBottom: "20px" }} >支付笔数以及预估佣金数据前往对应的三方开放后台查看</div>
            <div className="card-box">
                {
                    dataSource.map((v, i) => {
                        return <Card key={i} top={v.top} nowData={v.top.nowData} />
                    })
                }
            </div>
            <div style={{ marginTop: 30, fontWeight: 700, fontSize: 22 }}>指标趋势</div>
            <OnlineIncome data={chartData} name="dataBoard" setQuery={this.setQuery} changeName={this.changeName} style={{ overflow: 'auto' }} height={'500px'} width={'100%'} />
        </div>
    }
}

export default Index;
